<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <title>用户管理</title>
  <style>
   	.layui-icon{
   	    font-size: 14px!important;
   	}
  </style>
</head>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs" ><a href="../" style="color: white;">后台管理系统</a></div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
        	  测试用户
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
   </div>
   <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">权限管理</a>
          <dl class="layui-nav-child">
            <dd class="layui-this"><a href="user">用户管理</a></dd>
            <dd><a href="javascript:;">角色管理</a></dd>
            <dd><a href="javascript:;">栏目管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">系统设置</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">轮播图设置</a></dd>
            <dd><a href="javascript:;">首页分类</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;"> 测试item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	<blockquote class="layui-elem-quote">
		用户管理
		</blockquote>
    	<!-- 表格上部工具条 -->
    	<script type="text/html" id="my_toolbar">
  			<a class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle"> 添加</i></a>
			<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete" ><i class="layui-icon layui-icon-delete"> 删除</i></a>
	    </script>
    
    	<!--表格  id对应下边elem-->
   		<table id="table" lay-filter="user_table"></table>
   		<!-- 表格右部工具条 -->
   		<script type="text/html" id="bar_table">
         <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
         <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
  </div>
  <div class="layui-footer">
    	底部固定区域
  </div>
</div>
<script src="../layui/layui.js"></script>
<script>
//JS 
layui.use(['element', 'layer', 'table','jquery'], function(){
	 var table = layui.table;	
	 var $=layui.jquery;
	 var tableIns=table.render({
		    elem: '#table'
		    ,height: 520
		    ,url: '/shopping/user/list' //数据接口
		    ,page: true //开启分页
		    ,toolbar: '#my_toolbar'
		    ,cols: [[ //表头
		       {type: 'checkbox', title: 'ID', sort: true, fixed: 'left'}//多选框
		      ,{field: 'username', title: '用户名'}
		      ,{field: 'password', title: '密码', sort: true}
		      ,{fixed: 'right', width:200, align:'center', toolbar: '#bar_table'}
		    ]]
	  });
	 //工具条监听
	 table.on('tool(user_table)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'detail'){
		    	editTable(data.id);
		    } else if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		    	//向服务端发送删除指令   ajax请求
		    	 $.get("/shopping/user/del",{id:data.id},function(result){
		    		 if(result==200){
				  			layer.msg("操作成功",{icon:1}); 
				      		obj.del();
				      		window.parent.location.reload();
				      	}else{
				      		layer.msg("操作失败",{icon:2}); 
				      	}
		    	 });
		      });
		    } else if(obj.event === 'edit'){
		    	editTable(data.id);
		    }
	  });
	 //弹出页 编辑时候需要传入id
	 function editTable(data){
			layer.open({
	  	      type: 2,
	  	      title: '',
	  	      maxmin: true,
	  	      shadeClose: true, //点击遮罩关闭层
	  	      area : ['500px' , '230px'],
	  	      content: '/shopping/user/edit?id='+data,  //加上选中行的ID值
	  	      end:function(){
	  	    	 //关闭弹出页，刷新页面
	  	    	 window.parent.location.reload();
	 	      }
	  	 }); 
	  }
	 //添加和多选删除的方法
	 table.on('toolbar(user_table)', function(obj){
	   	  var checkStatus = table.checkStatus(obj.config.id)
	   	  ,data = checkStatus.data //获取选中的数据
	   	  ,ids=new Array();//选中数据
	   	  if(obj.event==='add'){//添加
	   		  editTable("");
	   	  }else if(obj.event==='delete'){//多选删除
	   		  if(data.length==0){
	   			  layer.msg('请选择一行');
	   		  }else{
	   			  layer.confirm('确定删除么',{icon: 3, title:'提示'},function(index){
		    			  for(var i=0;i<data.length;i++){
		    				  ids.push(data[i].id);
		    			  }
		    			  $.get("/shopping/user/del",{id:ids.toString()},function(result){
		 		    		 if(result==200){
		 				  			layer.msg("操作成功",{icon:1}); 
		 				  		    window.parent.location.reload();
		 				      	}else{
		 				      		layer.msg("操作失败",{icon:2}); 
		 				      }
		 		    	 });
	   			  });
	   		  }
	   	  }
   });
});
</script>
</body>
</html>
